<template>
  <div class="contain">
    <div class="forecast">
      <div class="kelei">
        <span>科 类：</span>
        <el-radio v-model="message.Lauraceae" label="理科">理科</el-radio>
        <el-radio v-model="message.Lauraceae" label="文科">文科</el-radio>
      </div>
      <div class="message">
        <el-form :inline="true" class="demo-form-inline">
          <el-form-item label="高考分数：">
            <el-input
              v-model="message.score"
              placeholder="请输入分数"
              size="medium"
              @blur="getRank"
            ></el-input>
          </el-form-item>
          <el-form-item label="高考位次：">
            <el-input
              v-model="message.rank"
              placeholder="请输入位次"
              size="medium"
            ></el-input>
          </el-form-item>
        </el-form>
        <div class="provinceSelect">
          <span>意向专业：</span>
          <el-input
            v-model="message.professional"
            placeholder="如（网络工程）"
            :style="{ width: 150 + 'px' }"
          ></el-input>
          <span>请选择目标省份：</span>
          <el-select
            v-model="message.target"
            placeholder="请选择"
            size="medium"
          >
            <el-option
              v-for="(item, index) in target"
              :key="index"
              :value="item"
            >
            </el-option>
          </el-select>
        </div>
      </div>
      <div class="search">
        <el-button
          type="primary"
          icon="el-icon-search"
          size="medium"
          @click="forecast"
          >预测</el-button
        >
      </div>
    </div>
    <intelligent-rec :listData="listData"></intelligent-rec>
  </div>
</template>

<script>
import IntelligentRec from './IntelligentRec.vue'
export default {
  data() {
    return {
      message: {
        Lauraceae: '',    // 科属
        score: '',    // 成绩
        rank: '',  // 位次
        professional: '',  //意向专业        
        target: ''     // 目标省份
      },
      target: ['安徽'],
      listData: []       // 接收目标地
    }
  },
  components: {
    IntelligentRec
  },
  methods: {
    forecast() {
      this.$http3({
        url: '/recommend',
        method: 'get',
        params: {
          province: this.message.target,
          Lauraceae: this.message.Lauraceae,
          rank: this.message.rank
        }
      }).then(res => {
        this.listData = res.data
        for(var i=0;i<7;i++) {
            this.listData[i].img='../../../assets/imgs/'+i+'.jpg'
        }
        console.log(this.listData); 
      })
    },
    getRank() {
      this.$http3({
        url: '/rank',
        method: 'get',
        params: {
          score: this.message.score,
          Lauraceae: this.message.Lauraceae,
        }
      }).then(res => {
        this.message.rank = res.data
      })
    }
  }

}
</script>

<style lang="less" scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.contain {
  position: relative;
  top: 40px;
}
.forecast {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 270px;
  box-shadow: 0 2px 2px rgba(10, 16, 20, 0.24), 0 0 2px rgba(10, 16, 20, 0.12);
  border-radius: 5px;
}
.kelei {
  margin: 30px 0 0 20px;
  font-size: 15px;
  color: #606266;
  .el-radio {
    margin-right: 30px;
  }
}
.message {
  margin: 30px 0 0 20px;
  .el-input {
    width: 103px;
    margin-right: 15px;
  }
  .provinceSelect {
    margin-top: 30px;
    span {
      font-size: 15px;
      color: #606266;
    }
    .el-select {
      width: 100px;
      margin-right: 30px;
    }
  }
}
.search {
  position: absolute;
  bottom: 115px;
  right: 70px;
  .el-button {
    width: 90px;
    height: 40px;
  }
}
</style>